<template>
  <div class="contanier">
    <div class="top">
      <div class="left"></div><span>财务管理</span>
    </div>
    <!-- 组件1  搜索 -->
    <MySearch @parentsearch="parentSearch" />
    <!-- 组件2  表格 -->
    <MyTable :myarr="arr" @resetTable="initHome" />
    <!-- 组件3   分页 -->
    <MyPage :page="page" :page-size="pageSize" :total="total" @changePageSize="parentpagesize" @changePage="parentpage" />
    
  </div>
</template>

<script>
import MySearch from './components/MySearch.vue'
import MyTable from './components/MyTable.vue'
import MyPage from './components/MyPage.vue'
import { getMoneyApi } from '../../api/studentApi'
export default {
  components: {
    MySearch,
    MyTable,
    MyPage
  },
  data() {
    return {
      arr: [],
      keyword: '', // 搜索关键词
      page: 1, // 默认当前页 是第一页
      pageSize: 10, // 默认每页显示20条
      total: 0// 总条数
    }
  },
  mounted() {
    // 发送我们的请求，数组是共享数据，我们要把写在父组件中。
    this.initHome()
  },
  methods: {
    parentpagesize(val) { // 切换pagesize事件
      this.pageSize = val
      this.page = 1
      this.initHome()
    },
    parentpage(val) { // 切换页码事件
      this.page = val
      this.initHome()
    },
    parentSearch(val) { // 子组件触发父组件 传参   {\"name\":123}
      this.keyword = val
      this.initHome()
    },
    // 首屏查询接口，一般跟搜索是共用一个接口的
    // 首屏查询接口，一般跟我们分页器也是绑定的关系  我们只需要加俩字段就可以
    // 支持分页  page当前页 pageSize一页多少条
    initHome() {
      var params = {
        keyword: this.keyword,
        page: this.page,
        pageSize: this.pageSize
      }
      getMoneyApi(params).then(res => {
        // console.log(res)
        if (res.code == 200) {
          this.arr = res.data
          this.total = res.total
        }
      })
    }
  }
}
</script>

<style scoped rel="stylesheet/scss" lang="scss">
.contanier{
  background-color: #D3E1F6;
  padding: 0 10px;
}
.contanier>.top{
  height: 60px;
  // background-color: yellowgreen;
  display: flex;
  align-items: center;
  font-size: 18px;
}
.contanier>.top>.left{
  width: 5px;
  height: 20px;
  margin-right: 14px;
  background-color: #438afe;
}
</style>
